﻿@page "/multi-select"
@inject IStringLocalizer<MultiSelects> Localizer

<h3>@Localizer["MultiSelectsTitle"]</h3>

<h4>@Localizer["MultiSelectsDescription"]</h4>

<DemoBlock Title="@Localizer["MultiSelectColorTitle"]" Introduction="@Localizer["MultiSelectColorIntro"]" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@Items1" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Primary" Items="@Items2" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Success" Items="@Items3" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Danger" Items="@Items4" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Warning" Items="@Items5" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Info" Items="@Items6" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Secondary" Items="@Items7" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Color="Color.Dark" Items="@Items8" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectBindingStringTitle"]" Introduction="@Localizer["MultiSelectBindingStringIntro"]" Name="BindingString">
    <section ignore class="mb-3">
        @((MarkupString)Localizer["MultiSelectBindingStringDescription"].Value)
    </section>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items1" @bind-Value="@SelectedItemsValue" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectAdd"]" OnClick="@AddItems" class="me-1" />
            <Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectDecrease"]" OnClick="@RemoveItems" />
            <Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectClean"]" OnClick="@ClearItems" />
        </div>
    </div>
    <section ignore class="mt-3">@SelectedItemsValue</section>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectBindingCollectionTitle"]" Introduction="@Localizer["MultiSelectBindingCollectionIntro"]" Name="BindingCollection">
    <section ignore class="mb-3">@((MarkupString)Localizer["MultiSelectBindingCollectionDescription"].Value)</section>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items" @bind-Value="@SelectedArrayValues" Max="4" Min="2" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectAdd"]" OnClick="@AddListItems" class="me-1" />
            <Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectDecrease"]" OnClick="@RemoveListItems" />
            <Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectClean"]" OnClick="@ClearListItems" />
        </div>
    </div>
    <section ignore class="mt-3">@(string.Join(",", SelectedArrayValues))</section>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectBindingNumberTitle"]" Introduction="@Localizer["MultiSelectBindingNumberIntro"]" Name="BindingNumber">
    <section ignore class="mb-3">@((MarkupString)Localizer["MultiSelectBindingNumberDescription"].Value)</section>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@LongItems" @bind-Value="@SelectedIntArrayValues" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectAdd"]" OnClick="@AddArrayItems" class="me-1" />
            <Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectDecrease"]" OnClick="@RemoveArrayItems" />
            <Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectClean"]" OnClick="@ClearArrayItems" />
        </div>
    </div>
    <section ignore class="mt-3">@(string.Join(",", SelectedIntArrayValues))</section>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectBindingEnumCollectionTitle"]" Introduction="@Localizer["MultiSelectBindingEnumCollectionIntro"]" Name="BindingEnumCollection">
    <section ignore class="mb-3">@((MarkupString)Localizer["MultiSelectBindingEnumCollectionDescription"].Value)</section>
    <MultiSelect @bind-Value="@SelectedEnumValues" />
    <section ignore class="mt-3">@(string.Join(",", SelectedEnumValues))</section>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectSearchTitle"]" Introduction="@Localizer["MultiSelectSearchIntro"]" Name="Search">
    <section ignore class="mb-3">@((MarkupString)Localizer["MultiSelectSearchDescription"].Value)</section>
    <MultiSelect Items="@Items" @bind-Value="@SelectedSearchItemsValue" ShowSearch="true" OnSearchTextChanged="@OnSearch" />
    <section ignore class="mt-3">@SelectedSearchItemsValue</section>
    <ConsoleLogger @ref="Logger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectGroupTitle"]" Introduction="@Localizer["MultiSelectGroupIntro"]" Name="Group">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="GroupItems" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectDisableTitle"]" Introduction="@Localizer["MultiSelectDisableIntro"]" Name="Disable">
    <section ignore class="mb-3">@Localizer["MultiSelectDisableDescription"]</section>
    <MultiSelect Items="@Items" Value="@SelectedDisableItemsValue" IsDisabled="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectOptionChangeTitle"]" Introduction="@Localizer["MultiSelectOptionChangeIntro"]" Name="OptionChange">
    <MultiSelect Items="@Items" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedOptionItemsValue" />
    <ConsoleLogger @ref="OptionLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectClientValidationTitle"]" Introduction="@Localizer["MultiSelectClientValidationIntro"]" Name="ClientValidation">
    <section ignore class="mb-3">@((MarkupString)Localizer["MultiSelectClientValidationDescription"].Value)</section>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-8">
                <MultiSelect Items="Items" @bind-Value="@Model.Address" />
            </div>
            <div class="col-12 col-sm-4 align-self-end">
                <Button ButtonType="ButtonType.Submit">@Localizer["MultiSelectClientValidationSubmit"]</Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectDisplayLabelTitle"]" Introduction="@Localizer["MultiSelectDisplayLabelIntro"]" Name="DisplayLabel">
    <section ignore>
        <p class="mb-3">@((MarkupString)Localizer["MultiSelectDisplayLabelDescription"].Value)</p>
        <Divider Text="@Localizer["MultiSelectDisplayLabelShowLabel"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    </section>
    <ValidateForm Model="@Foo">
        <div class="row g-3">
            <div class="col-12">
                <MultiSelect Color="Color.Primary" Items="@Items1" @bind-Value="@Foo.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="@Localizer["MultiSelectDisplayLabelHideLabel"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items2" @bind-Value="@Foo.Name" />
    <Divider Text="@Localizer["MultiSelectDisplayLabelCustomDisplayText"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items3" @bind-Value="@Foo.Name" DisplayText="@Localizer["MultiSelectDisplayLabelCustomText"]" ShowLabel="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectVeryLongTextTitle"]" Introduction="@Localizer["MultiSelectVeryLongTextIntro"]" Name="VeryLongText">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" DisplayText="@Localizer["MultiSelectVeryLongTextDisplayText"]" ShowLabel="true"></MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectButtonTitle"]" Introduction="@Localizer["MultiSelectButtonIntro"]" Name="Button">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue1" ShowToolbar="true" ShowSearch="true" />
        <p>@SelectedLongItemsValue1</p>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectMaxMinTitle"]" Introduction="@Localizer["MultiSelectMaxMinIntro"]" Name="MaxMin">
    <div style="max-width: 300px">
        <p>@Localizer["MultiSelectMaxMinMax"]</p>
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedMaxItemsValue" Max="2" />
    </div>
    <div style="max-width: 300px" class="mt-3">
        <p>@Localizer["MultiSelectMaxMinMin"]</p>
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedMinItemsValue" Min="2" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectExpandButtonTitle"]" Introduction="@Localizer["MultiSelectExpandButtonIntro"]" Name="ExpandButton">
    <div style="max-width: 300px">
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue3" ShowToolbar="true" ShowDefaultButtons="false">
            <ButtonTemplate>
                <button class="btn" @onclick="@OnClickButton">@Localizer["MultiSelectExpandButtonText"]</button>
            </ButtonTemplate>
        </MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectCascadingTitle"]" Introduction="@Localizer["MultiSelectCascadingIntro"]" Name="Cascading">
    <section ignore class="mb-3">@((MarkupString)Localizer["MultiSelectCascadingDescription"].Value)</section>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="@CascadingItems2" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@CascadingItems1" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectItemTemplateTitle"]" Introduction="@Localizer["MultiSelectItemTemplateIntro"]" Name="ItemTemplate">
    <div class="row">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@TemplateItems">
                <ItemTemplate>
                    <div class="mul-select-item">
                        <i class="fa-solid fa-font-awesome"></i>
                        <span>@context.Text</span>
                        <i class="fa-solid fa-font-awesome"></i>
                    </div>
                </ItemTemplate>
            </MultiSelect>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["MultiSelectPopoverTitle"]" Introduction="@Localizer["MultiSelectPopoverIntro"]" Name="Popover">
    <div class="row">
        <div class="col-12 col-sm-6 overflow-hidden">
            <MultiSelect TValue="string" Items="@Items" IsPopover="true" ShowSearch="true" ShowToolbar />
         </div>
     </div>
 </DemoBlock>

 <AttributeTable Items="@GetAttributes()" />

 <EventTable Items="@GetEvents()" />
